<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制台调试页面</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .header {
            background: #1890ff;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .content {
            padding: 20px;
        }
        .console-output {
            background: #000;
            color: #00ff00;
            padding: 15px;
            border-radius: 4px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 12px;
            max-height: 400px;
            overflow-y: auto;
            margin: 10px 0;
        }
        .error { color: #ff6b6b; }
        .warn { color: #ffa726; }
        .info { color: #42a5f5; }
        .log { color: #00ff00; }
        button {
            background: #1890ff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #40a9ff;
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🔍 控制台调试工具</h1>
            <p>实时捕获和显示浏览器控制台信息</p>
        </div>
        
        <div class="content">
            <div class="test-section">
                <h3>控制台输出</h3>
                <div id="console-output" class="console-output">
                    <div class="info">[INFO] 控制台调试工具已启动</div>
                </div>
                <button onclick="clearConsole()">清空控制台</button>
                <button onclick="testReactApp()">测试React应用</button>
                <button onclick="testAntDesign()">测试Ant Design</button>
            </div>
            
            <div class="test-section">
                <h3>React应用测试</h3>
                <div id="react-test-area"></div>
                <button onclick="loadReactComponents()">加载React组件</button>
                <button onclick="testRouting()">测试路由</button>
            </div>
            
            <div class="test-section">
                <h3>快速操作</h3>
                <button onclick="window.location.href='/'">访问根路径</button>
                <button onclick="window.location.href='/login'">访问登录页</button>
                <button onclick="window.location.href='/dashboard'">访问仪表板</button>
            </div>
        </div>
    </div>
    
    <script>
        // 重写控制台方法来捕获输出
        const originalConsole = {
            log: console.log,
            error: console.error,
            warn: console.warn,
            info: console.info
        };
        
        function addToConsoleOutput(message, type = 'log') {
            const output = document.getElementById('console-output');
            const timestamp = new Date().toLocaleTimeString();
            const div = document.createElement('div');
            div.className = type;
            div.innerHTML = `[${timestamp}] [${type.toUpperCase()}] ${message}`;
            output.appendChild(div);
            output.scrollTop = output.scrollHeight;
        }
        
        // 重写console方法
        console.log = function(...args) {
            originalConsole.log.apply(console, args);
            addToConsoleOutput(args.join(' '), 'log');
        };
        
        console.error = function(...args) {
            originalConsole.error.apply(console, args);
            addToConsoleOutput(args.join(' '), 'error');
        };
        
        console.warn = function(...args) {
            originalConsole.warn.apply(console, args);
            addToConsoleOutput(args.join(' '), 'warn');
        };
        
        console.info = function(...args) {
            originalConsole.info.apply(console, args);
            addToConsoleOutput(args.join(' '), 'info');
        };
        
        // 捕获未处理的错误
        window.addEventListener('error', function(e) {
            addToConsoleOutput(`未捕获的错误: ${e.message} 在 ${e.filename}:${e.lineno}:${e.colno}`, 'error');
        });
        
        // 捕获Promise拒绝
        window.addEventListener('unhandledrejection', function(e) {
            addToConsoleOutput(`未处理的Promise拒绝: ${e.reason}`, 'error');
        });
        
        function clearConsole() {
            document.getElementById('console-output').innerHTML = '<div class="info">[INFO] 控制台已清空</div>';
        }
        
        function testReactApp() {
            console.log('开始测试React应用...');
            
            // 测试React是否可用
            if (typeof React !== 'undefined') {
                console.log('✓ React已加载');
            } else {
                console.error('✗ React未加载');
            }
            
            // 测试ReactDOM是否可用
            if (typeof ReactDOM !== 'undefined') {
                console.log('✓ ReactDOM已加载');
            } else {
                console.error('✗ ReactDOM未加载');
            }
            
            // 尝试加载主应用
            const script = document.createElement('script');
            script.type = 'module';
            script.src = '/src/main.jsx';
            script.onload = () => console.log('✓ main.jsx加载成功');
            script.onerror = (e) => console.error('✗ main.jsx加载失败:', e);
            document.head.appendChild(script);
        }
        
        function testAntDesign() {
            console.log('测试Ant Design组件...');
            
            // 尝试动态导入Ant Design
            import('/node_modules/.vite/deps/antd.js')
                .then(() => {
                    console.log('✓ Ant Design加载成功');
                })
                .catch(err => {
                    console.error('✗ Ant Design加载失败:', err);
                });
        }
        
        function loadReactComponents() {
            console.log('尝试加载React组件...');
            
            const testArea = document.getElementById('react-test-area');
            testArea.innerHTML = '<div id="react-mount-point">React组件将在此处渲染...</div>';
            
            // 尝试创建一个简单的React组件
            try {
                const script = document.createElement('script');
                script.innerHTML = `
                    import React from '/node_modules/.vite/deps/react.js';
                    import { createRoot } from '/node_modules/.vite/deps/react-dom_client.js';
                    
                    const TestComponent = () => {
                        return React.createElement('div', {
                            style: { padding: '10px', background: '#f0f2f5', borderRadius: '4px' }
                        }, 'React组件渲染成功！');
                    };
                    
                    const mountPoint = document.getElementById('react-mount-point');
                    if (mountPoint) {
                        const root = createRoot(mountPoint);
                        root.render(React.createElement(TestComponent));
                        console.log('✓ React组件渲染成功');
                    }
                `;
                script.type = 'module';
                document.head.appendChild(script);
            } catch (error) {
                console.error('✗ React组件创建失败:', error);
            }
        }
        
        function testRouting() {
            console.log('测试路由功能...');
            
            // 测试history API
            if (window.history && window.history.pushState) {
                console.log('✓ History API可用');
            } else {
                console.error('✗ History API不可用');
            }
            
            // 测试location对象
            console.log('当前URL:', window.location.href);
            console.log('当前路径:', window.location.pathname);
        }
        
        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('控制台调试页面加载完成');
            console.log('用户代理:', navigator.userAgent);
            console.log('当前时间:', new Date().toLocaleString());
        });
    </script>
</body>
</html>